import { mapMutations } from 'vuex'
export default {
  props: {
    sizeClass: {
      type: String,
      default: 'modal-sm'
    },
    width: [String, Number], //modal的宽度
    minWidth: [String, Number],//modal 的最小宽度
    customeClass: { //可自定义 modal最外层元素的class
      type: String,
      default: ''
    },
    titleTxt: {
      type: String,
      default: 'Modal Title'
    },
    bodyTxt: {
      type: String,
      default: 'Modal Body'
    },
    yesTxt: {
      type: String,
      default: '确定'
    },
    cancelTxt: {
      type: String,
      default: '取消'
    },
    level: {
      type: [String, Number],
      default: 1
    },
    //是否显示关闭图标按钮
    showCloseIcon: {
      type: Boolean,
      default: true
    },
    // 阴影是否需要是静态的，（如果false，则点击阴影处可以关闭modal，否则不行）
    static: {
      type: [Boolean, String],
      default: false
    },
    transition: {
      type: String,
      default: 'modal'
    }
  },
  
  data () {
    return {
      show: false,
      isHide: false
    }
  },

  computed: {
    enterClass () {
      return `${this.transition}In`
    },

    leaveClass () {
      return `${this.transition}Out`
    }
  },

  mounted () {
    // document.body.appendChild(this.$el)
    $('#app .wrapper').append($(this.$el));
  },

  methods: {
    ...mapMutations([
      'SET_MODAL'
    ]),

    beforeEnter () {
      this.$emit('opening')
    },

    afterEnter () {
      this.$emit('opened')
    },

    beforeLeave () {
      this.$emit('closing')
    },

    afterLeave () {
      this.$emit('closed')
    },

    active () {
      this.show = true;
      this.isHide = false;
    },

    deactive () {
      this.show = false
    },

    tempHide () {
      this.isHide = true;
    },

    iconClose () {
      this.deactive();
      this.SET_MODAL({active: [], deactive: []});
    },

    staticDeactive () {
      let _static = this.static;
      let isStatic = _static;
      if(typeof _static == 'string') {
        isStatic = _static == 'true' ? true : false;
      }
      if(!isStatic) {
        this.deactive();
        this.SET_MODAL({active: [], deactive: []});
      }
    },

    confirm () {
      this.$emit('confirm')
    }
  }
}